<template>
  <div class="home">
    <el-container style="height:100%">
        <el-aside width="auto">
            <Aside></Aside>
        </el-aside>
        <el-container>
            <el-header height="60px">
                <Header></Header>
            </el-header>
            <el-main>
                <el-tag
                    :effect="$route.name == tag.name ? 'dark' : 'light'"
                    size="mini"
                    :key="tag.label"
                    v-for="(tag) in tags"
                    :closable="tag.label == '首页' ? false : true"
                    :disable-transitions="true"
                    @close="handleClose(tag)"
                    @click="changeTag(tag)">
                    {{tag.label}}
                </el-tag>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Aside from '@/components/Aside.vue'
import Header from '@/components/Header.vue'
export default {
    name:'Home',
    components: {Aside,Header},
    computed:{
        ...mapState('tagOptions',['tags'])
    },
    methods:{
        // 切换标签
        changeTag(tag){
            // 切换路由
            this.$router.push({
                name: tag.name
            })
        },
        // 关闭tag
        handleClose(tag){
            this.$store.dispatch('tagOptions/deleteTag',tag)
            // 方式一
            let tags = this.$store.state.tagOptions.tags
            let highlight = tags[tags.length - 1]
            // 切换路由
            this.$router.push({
                name: highlight.name
            })
        }
    }
}
</script>
<style lang="less" scoped>
.home{
    height: 100%;
}
.el-header{
    background-color: #000111;
    padding: 30px;
}
.el-aside{
    height: 100%;
}
.el-main{
    padding-top: 10px;
    .el-tag{
        margin-bottom: 10px;
        margin-right: 10px;
        cursor: pointer;
    }
}
</style>